<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="ClientTemplate.xhtml">   
        <ui:define name="body"> 
           <p:dataGrid value="#{elevationController.items}" var="item" 
                        paginator="true" rows="6"   columns="3" 
                        paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"  
                        rowsPerPageTemplate="3,6,9" paginatorPosition="bottom" > 
                <div class="productGallery">
                    <ul id="grid" class="group">
                        <li>
                            <div class="details">
                                <h3>#{item.elName}</h3>
                                <a class="more" href="Product-Details.html">Detail</a></div>
                            <a class="more" href="Product-Details.html"><img src="#{request.contextPath}/resources/images/lanterns.jpg" />
                            </a>   
                        </li>
                    </ul>
                </div>

            </p:dataGrid>
          <!--  <p:galleria id="contentGalleria" value="#{elevationController.items}" var="items" panelWidth="1100" panelHeight="500"  
                        frameWidth="300" frameHeight="250" effect="clip">  

                <p:graphicImage id="playerImage" value="/images/lanterns.jsp" alt="alt" title="title"/> 

                <f:facet name="content">  
                    <h:panelGrid  columns="2" cellpadding="5">  
                        <f:facet name="header">  
                            <p:graphicImage value="/images/lanterns.jsp" />  
                        </f:facet>  
                        <h:outputText value="Name: " />  
                        <h:outputText id="name" value="#{item.elName}"/> 
                        <h:outputText value="Description : " />  
                        <h:outputText id="description" value="#{item.elDescription}"/>  
                        <h:outputText value="Price : " />  
                        <h:outputText id="price" value="#{item.elCost}"/> 
                    </h:panelGrid>  
                </f:facet>  
            </p:galleria>  -->
            <!--  <p:imageSwitch effect="fade">  
                  <ui:repeat value="#{elevationController.items}" var="items">  
                      <p:graphicImage value="../images/lanterns.jsp" />  
                  </ui:repeat>  
              </p:imageSwitch> -->
        </ui:define>
    </ui:composition>
</html>
